<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <f:view beforePhase="#{VendorsBean.fetch}">
            <ui:composition template="./main-template.xhtml">
                <ui:param name="titulo" value="Vendedores" />
                <ui:define name="body">
                    <a4j:form>
                        <rich:toolBar height="26" itemSeparator="disc">
                            <rich:toolBarGroup>
                                <h:graphicImage value="/img/new.gif" onclick="newVendor()" styleClass="icon" />
                            </rich:toolBarGroup>
                            <rich:toolBarGroup>
                                <h:graphicImage value="/img/save.gif" onclick="createVendor()" styleClass="icon" />
                            </rich:toolBarGroup>
                            <rich:toolBarGroup>
                                <h:graphicImage value="/img/find.gif" styleClass="icon" />
                            </rich:toolBarGroup>
                        </rich:toolBar>
                    </a4j:form>
                    <rich:simpleTogglePanel id="stpEdicion" opened="true">
                        <f:facet name="header">
                            Edición
                        </f:facet>
                        <a4j:form>
                            <rich:tabPanel switchType="client">
                                <rich:tab label="Datos Básicos">
                                    <table>
                                        <tr>
                                            <td>
                                                <h:inputHidden value="#{VendorsBean.vendedor.identificacion}" />
                                                <h:outputLabel value="Nombres" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.vendedor.nombres}" /> <br/>
                                            </td>
                                            <td>
                                                <h:outputLabel value="Apellidos" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.vendedor.apellidos}" /> <br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Salario" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.vendedor.salario}" /> <br/>
                                            </td>
                                            <td>
                                                <h:outputLabel value="Comisión de Ventas" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.vendedor.comisionVentas}" /> <br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <h:outputLabel value="Perfil" styleClass="label" /> <br/>
                                                <h:inputTextarea style="width:100%" value="#{VendorsBean.vendedor.perfil}" /> <br/>
                                            </td>
                                        </tr>
                                    </table>
                                </rich:tab>
                                <rich:tab label="Experiencia Laboral">
                                    <table width="550">
                                        <tr>
                                            <td >
                                                <h:outputLabel value="Nombre Empresa" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.experienciaVendendor.nombreEmpesa}" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                <h:outputLabel value="Cargo" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.experienciaVendendor.cargo}" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                <h:outputLabel value="Año" styleClass="label" /> <br/>
                                                <h:inputText value="#{VendorsBean.experienciaVendendor.anio}" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                <h:outputLabel value="Descripción" styleClass="label" /> <br/>
                                                <h:inputTextarea value="#{VendorsBean.experienciaVendendor.descripcion}" />
                                            </td>
                                        </tr>
                                    </table>
                                    <rich:separator />
                                    <rich:extendedDataTable id="tblExperiencia" height="360px" value="#{VendorsBean.vendedor.experiencia}" var="cr">
                                        <rich:column width="150" filterBy="#{cr.nombreEmpesa}" sortBy="#{cr.nombreEmpesa}" label="Identificación">
                                            <f:facet name="header">
                                                Nombre Empresa
                                            </f:facet>
                                            #{cr.nombreEmpesa}
                                        </rich:column>
                                        <rich:column width="250" filterBy="#{cr.anio}" sortBy="#{cr.anio}" label="Nombres">
                                            <f:facet name="header">
                                                Año
                                            </f:facet>
                                            #{cr.anio}
                                        </rich:column>
                                        <rich:column width="114" label="op" >
                                            <f:facet name="header" >
                                                Operaciones
                                            </f:facet>
                                            <h:graphicImage value="/img/edit.gif" styleClass="icon" />
                                            <rich:spacer width="3" />
                                            <h:graphicImage value="/img/del.gif" styleClass="icon" />
                                        </rich:column>
                                    </rich:extendedDataTable>
                                </rich:tab>
                            </rich:tabPanel>
                            <a4j:jsFunction name="createVendor" action="#{VendorsBean.createOrUpdate}" reRender="stpEdicion,tblVendedores   "  />
                        </a4j:form>
                    </rich:simpleTogglePanel>
                    <a4j:form>
                        <rich:extendedDataTable id="tblVendedores" height="360px" value="#{VendorsBean.allVendors}" var="cr">
                            <rich:column width="150" filterBy="#{cr.identificacion}" sortBy="#{cr.identificacion}" label="Identificación">
                                <f:facet name="header">
                                    Identificación
                                </f:facet>
                                #{cr.identificacion}
                            </rich:column>
                            <rich:column width="250" filterBy="#{cr.nombres}" sortBy="#{cr.nombres}" label="Nombres">
                                <f:facet name="header">
                                    Nombres
                                </f:facet>
                                #{cr.nombres}
                            </rich:column>
                            <rich:column width="250" filterBy="#{cr.apellidos}" sortBy="#{cr.apellidos}" label="Apellidos">
                                <f:facet name="header">
                                    Apellidos
                                </f:facet>
                                #{cr.apellidos}
                            </rich:column>
                            <rich:column width="114" label="op" >
                                <f:facet name="header" >
                                    Operaciones
                                </f:facet>
                                <h:graphicImage value="/img/edit.gif" onclick="srcById(#{cr.identificacion})" styleClass="icon" />
                                <rich:spacer width="3" />
                                <h:graphicImage value="/img/del.gif" onclick="delVendor(#{cr.identificacion})" styleClass="icon" />
                            </rich:column>
                        </rich:extendedDataTable>
                    </a4j:form>

                    <a4j:form>
                        <a4j:jsFunction name="newVendor" action="#{VendorsBean.newVendor}" reRender="stpEdicion"  />
                        <a4j:jsFunction name="delVendor" action="#{VendorsBean.delete}" reRender="tblVendedores" oncomplete="" >
                            <a4j:actionparam name="p1" assignTo="#{VendorsBean.id}" />
                        </a4j:jsFunction>
                        <a4j:jsFunction name="srcById" action="#{VendorsBean.findById}" reRender="stpEdicion" oncomplete="" >
                            <a4j:actionparam name="p1" assignTo="#{VendorsBean.id}" />
                        </a4j:jsFunction>
                    </a4j:form>
                </ui:define>
            </ui:composition>
        </f:view>
    </body>
</html>